<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>下面是app的实例范围</p>
			<test></test>
		</div>
		<div id="app2">
			<p>下面是app2的实例范围</p>
			<test></test>
		</div>
		<!-- 1.定义模板 -->
		<template id="t">
			<div>
				<!-- 模板中添加事件 -->
				<img src="../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png" @click="fn"/>
				<ul>
					<li>南北船合并获确认旗下8家公司同晚集体公告</li>
					<li>全球权威大学排名中国高校表现抢眼</li>
				</ul>
				<h2>{{msg}}</h2>
			</div>
		</template>
	</body>
	<script src="../vue.min.js"></script>
	<script type="text/javascript">
		//2.全局组件定义
		Vue.component('test',{
			template:'#t',
			//组件中定义数据
			data: function(){
				return {
					msg:'hello'
				}
			},
			methods:{
				fn:function(){
					console.log("图片被点击了");
				}
			}
		});
		var vm = new Vue({
			el:'#app',
			data:{
				
			}
		});
		//不同的实例对象中均可使用
		var vm2 = new Vue({
			el:'#app2',
			data:{
				
			}
		})
	</script>
</html>
